<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="210px"><Aside/></el-aside>
      <el-container>
        <el-header><Header/></el-header>
        <el-main>
          <!-- 用来加载配置好的子路由对应的组件 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 <script setup>
 import { ref } from 'vue'
 import Aside from '../components/Aside.vue'
 import Header from '../components/Header.vue'
</script>
 <style scoped>
 .el-aside{
    background-color: #5a8a5c;
    height: 100vh;
 }
 .el-header{
    background-color: #fff;
 }
 .el-main{
  padding-top: 0px;
    background-color: #fff;
    height: calc(100vh - 50px);
 }
</style>